<template>
<!-- 为了达到从文章详情页回到列表时，能还原它的滚动条的位置：
1. 在本组件中监听用户的滚动动作，实时去记录这个位置
2. 再次回到本组件时（页面恢复），
如果组件采用的缓存，则它会多出两个钩子函数：
  activated () {} 激活
  deactivated () {} 失活
重置一下滚动条 -->
  <div class="scroll-wrapper" @scroll="hScroll" ref="refScroll">
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <!--
        van-list自带上拉加载更多 的效果
        原理：
          1）数据项在list中
          2）在显示数据时，如果当前的数据不足一屏，它会 自动调用 onLoad去加载数据
            在onload是要通过ajax取回新数据
            - 把数据追加到list中（list的内容会越来越多）
            - 把loading手动设置为false
            - 判断是否所有的数据已经加载完成，如果是，则把finished设为true
          3) 如果手动向上拉，且finished不为true, 也会去调用onLoad
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <van-cell
        v-for="(item,idx) in list"
        :key="idx"
        :title="item.title"
        @click="$router.push('/article/' + item.art_id.toString())">
          <div slot="label">

            <!-- 图片 当前文章有几张图 就用几个宫格 -->
            <van-grid :column-num="item.cover.images.length" :border="false">
              <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>

            <!-- 文字说明 -->
            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <!-- 使用全局过滤器 -->
              <span>{{item.pubdate | relativeTime}}</span>

              <!-- 如果登陆用户，则显示x按钮
                如何知道当前用户是否登陆？ 去vuex中查看，是否有token

                @click="hClose": 用来向父组件发布事件,传入当前的文章
              -->
              <span class="close" @click.stop="hClose(item)" v-if="$store.state.tokenInfo.token">
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
// 在初始进入页面时，list为空，此内容不足一屏，按vantlist组件的
// 工作要求，它会自动去调用onload方法，所以我们可以直接在onload中调用
// getArticles来加载文章数据
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      list: [], // 数据项
      timestamp: null, // 时间戳
      isLoadingNew: false, // 是否加载最新数据(下拉刷新)
      loading: false, // 上拉加载
      finished: false
    }
  },
  created () {
    console.log('articleList被创建了', Date.now())
    // 创建 组件完成之后，开始监听 事件总线上的 delArticle事件。
    this.$eventBus.$on('delArticle', obj => {
      console.log('我是频道', this.channel, '收到delArticle事件', obj)
      const { channelId, articleId } = obj
      // 是否是当前频道：
      //   是： 在list中找到文章编号是obj.article的数据，并删除
      //   否： 不处理
      if (channelId !== this.channel.id) {
        console.log('与我无关')
        return
      }

      console.log('在list中，找出文章id为articleId的元素,并删除', articleId)
      // 在数组list找到某个项，它的art_id 与 articleId，并删除它。
      // 1. 找出下标来
      // 2. 删除它 splice(idx, 1)
      const idx = this.list.findIndex(article => article.art_id.toString() === articleId)
      // findIndex 找到元素的下标，找不到，就会返回-1
      if (idx !== -1) {
        // 找到了下标, 删除它。
        // 如何在数组中，删除指定下标元素？
        this.list.splice(idx, 1)
      }
    })
  },
  methods: {
    async onRefresh () {
      // 在van-pull-refresh组件中，下拉时，它就会执行。
      // 1. 去取回最新的文章。
      const result = await getArticles(this.channel.id, Date.now())
      const arr = result.data.data.results
      // 2. 把文章追加到list的 头部
      this.list = arr.concat(this.list)
      // 3. 提示更新结果
      this.$toast.success('刷新成功' + arr.length + '条')
      // 4. 结束loadin状态
      this.isLoadingNew = false
    },
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const result = await getArticles(this.channel.id, this.timestamp)
      console.log(result)
      // 保存本次请求回来的数据中的时间戳，以便下次传入
      this.timestamp = result.data.data.pre_timestamp
      // 1. - 把数据追加到list中（list的内容会越来越多）
      const arr = result.data.data.results
      // arr就是本次取回来的数据，就是一个数组，其中每一个元素都是一个对象，表示一篇文章。
      this.list = this.list.concat(arr)
      // 2. - 把loading手动设置为false
      this.loading = false
      // 3. - 判断是否所有的数据已经加载完成，如果是，则把finished设为true
      if (arr.length === 0) {
        this.finished = true
      }
    },
    // 点击关闭按钮，通知父组件index.vue中去显示更多操作的弹层
    // 传递文章编号
    hClose (article) {
      // console.log('当前要删除的文章是', article.art_id.toString())
      // 它向父组件index.vue抛出一个事件
      this.$emit('showMoreAction', article.art_id.toString())
    },
    hScroll () {
      // todo: 防抖操作
      // 实时保存滚动条的位置
      // 这里不需要响应式的数据，直接用一个普通的属性就行
      // console.log(this.$refs.refScroll.scrollTop)
      this.scrollTop = this.$refs.refScroll.scrollTop
    }
  },
  // 激活
  activated () {
    // console.log('激活')
    // 重置一下滚动条的位置
    if (this.scrollTop && this.$refs.refScroll) {
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  },
  // 失活
  deactivated () {
    // console.log('失活')
  }
}
</script>

<style scoped lang='less'>
.meta {
  display: flex;
  span{
    margin-right: 10px;
  }
  .close {
   // 让它在最右边
    margin-left: auto
  }
}
</style>
